<template>
    <div class="section_common">
        <!-- 顶部图像 学习路径 -->
        <div class="top_img">
            <img
                    src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/04/14/1618394823625.png"
                    alt=""
            />
        </div>
        <div class="main">
            <div class="item" v-for="(item,index) in this.courseDeptList" :key="index">
                <div class="left">
                    <div class="title">{{ item.deptName }}</div>
                    <div class="van-ellipsis" >
                        <a  :title="item.description">{{item.description}}</a>
                    </div>
                </div>
                <div class="right">
                    <div class="controller"  @click="goCourseList(item.deptId)">
                        <span>查看详情</span>
                    </div>
                </div>
            </div>
        </div>
        <!--        </van-list>-->
    </div>

</template>

<script>
    export default {
        data() {
            return {
                posts: [],
                getCourseDeptListUrl: "/mobiles/getCourseDeptList", //学习路径推荐首页列表
                courseDeptList: [],
                current: 1, //当前页数
                size: 20, //每次加载多少条
                toName: "", //进入页面的名字
                hasUpdate: false, //细节页面是否有更新？
                type: 1, // 1 学习路径
                hadFinishCount: 0, //课程学习进度，区别于课件学习进度
                finished: false,
                loading: false,
                keyword:''
            };
        },
        created() {
            this.getCourseDeptList();
        },
        methods: {
            //搜索事件
            searchHandle(){
                this.getCourseDeptList();
            },
            //学习路径推荐首页列表
            getCourseDeptList() {
                var that = this;
                this.$https
                    .post(this.getCourseDeptListUrl, {
                        deptId: JSON.parse(localStorage.getItem("userInfo")).deptId,
                        current: that.current,
                        content:that.keyword,
                        type: this.type
                    })
                    .then((res) => {
                        this.courseDeptList = res.data.data;
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            },
            goCourseList(deptId) {
                this.$router.push(`/train/study/list/${deptId}/${this.type}`);
            },
            //返回上一页
            onClickLeft() {
                //Toast("返回");
                this.$router.go(-1);
            },
        },
    }
</script>

<style lang="scss" scoped>
    .top_img {
        width: 100%;

        img {
            width: 100%;
        }
    }
    .search_area{
        width: 100%;
        .search_div{
            width: 70%;
            margin: 10px auto;
            display: block;
        }
        .search_input{
            width:90%;
            margin: 10px auto;
            padding: 10px;
            box-sizing: border-box;
            border-radius: 20px;
            border: none;
            border:1px solid rgba(0,0,0,0.5)
        }
    }
    .main {
        width: 100%;
        padding: 10px;
        display: flex;
        flex-flow: column nowrap;

        .item {
            width: 100%;
            height:100px;
            background-color: white;
            border-radius: 6px;
            padding: 5px 20px;
            font-size: 12px;
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            border: 1px solid rgba(0, 0, 0, 0.1);
            margin-bottom: 5px;

            .left {
                flex: 1;
                line-height: 40px;
                overflow: hidden;
                & > div {
                    margin-bottom: 4px;
                }

                .title {
                    font-size: 16px;
                    font-weight: 600;
                }
                .controller {
                    span {
                        padding: 4px 10px;
                        background-color: #fea84f;
                        color: white;
                        border-radius: 10px;
                        cursor: pointer;
                    }
                }
            }

            .right {
                width: 100px;
                .controller {
                    span {
                        padding: 4px 10px;
                        background-color: #fea84f;
                        color: white;
                        border-radius: 10px;
                        cursor: pointer;
                    }
                }
                img {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    overflow: hidden;
                    width: 100%;
                }
            }
        }
    }
</style>
